<template>
  <div class="edit">
    <el-tabs type="border-card">
      <el-tab-pane label="单元详情">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="活动名称：" prop="communityname">
            <span>{{ ruleForm.communityname }}</span>
          </el-form-item>
          <el-form-item label="单元名称：" prop="unitname">
            <span>{{ ruleForm.unitname }}</span>
          </el-form-item>
          <el-form-item label="栋数：" prop="unitnum">
            <span>{{ ruleForm.unitnum }}</span>
          </el-form-item>
          <el-form-item label="状态：" prop="unitstatus">
            <span>{{ ruleForm.unitstatus }}</span>
          </el-form-item>
          <el-form-item label="咨询问答：" prop="content">
            <span v-html="ruleForm.content"></span>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <!-- 按钮 -->
    <div class="btn-box">
      <el-button type="primary" icon="el-icon-d-arrow-left" @click="goBack"
        >返回</el-button
      >
      <el-button type="primary" icon="el-icon-finished" @click="save"
        >编辑</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单数据
      ruleForm: {
        communityname: "",
        unitname: "",
        unitnum: "",
        unitstatus: "",
        content: "",
      },
      id: this.$route.query.id,
      // 校验
      rules: {
        communityname: [{ required: true, trigger: "blur" }],
        unitname: [{ required: true, trigger: "blur" }],
        unitnum: [{ required: true, trigger: "blur" }],
        unitstatus: [{ required: true, trigger: "blur" }],
      },
    };
  },
  created() {
    this.particulars();
  },
  methods: {
    particulars() {
      this.$axios
        .get("/house/getDetailId", {
          params: {
            id: this.$route.query.id,
          },
        })
        .then((res) => {
          console.log(res);
          this.ruleForm = res.data[0];
          this.ruleForm.content = res.data[0].unitcontext;
          this.id = res.data[0].id;
        });
    },
    // 返回
    goBack() {
      this.$router.push({
        path: "/house/unit",
      });
    },
    // 编辑
    save() {
      this.$router.push({
        path: "/house/add",
        query: {
          id: this.id,
          communityname: this.ruleForm.communityname,
          unitname: this.ruleForm.unitname,
          unitnum: this.ruleForm.unitnum,
          unitstatus: this.ruleForm.unitstatus,
          content: this.ruleForm.content,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 按钮
.btn-box {
  width: 100px;
  height: 110px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-evenly;
  position: fixed;
  top: 45%;
  right: 1%;
}
.el-button {
  width: 80px;
  font-size: 14px;
}
</style>